<template>
    <view class="no-effective">
        <view class="common-flex-between" style="align-items: center">
            <view>
                <text class="icon-vip icon-btn"/>
                <text>拇指宫殿{{item.vipCardMemberLogType === 1 ? '次卡' : '时长卡'}}</text>
            </view>
            <text>NO.{{item.vipCardMemberLogId}}</text>
        </view>
        <view class="btn-wrappers common-flex-between">
            <text class="btn one-btn" @tap="giveFriend">赠送给朋友</text>
            <text class="btn two-btn" @tap="watchOrder">立即激活</text>
        </view>
        <view class="time common-little-font">
            最迟{{ item.vipCardMemberLogLatestActivationTime | formatTime }}前激活
        </view>
        <gwShowModal
                v-model="showModal"
                type="tips"
                width="550rpx"
                height="260rpx"
                @confirm="confirmHandle"
                :tipsContent="tipsObj[modalType]"/>
    </view>
</template>

<script>
    import service from "@/service";
    import gwShowModal from '@/pages/components/gw-show-modal'
    import { dateFmt } from '@/util/utils';
    export default {
        name: "activeCard",
        props: {
            item: {
                type: Object,
                default: {}
            }
        },
        data(){
            return{
                showModal: false,
                modalType: 'active',
                tipsObj: {
                    active: '确认激活该会员卡吗？',
                    giveFriend: '确认赠送给他人吗？'
                }
            }
        },
        components: {
            gwShowModal
        },
        methods: {
            giveFriend(){
                this.modalType='giveFriend';
                this.showModal = true;
            },
            confirmHandle(){
                this.showModal = false;
                if(this.modalType === 'active'){
                    this.activeCardHandle()
                } else {
                    uni.navigateTo({
                        url: `./give-friend?vipCardMemberLogId=${this.item.vipCardMemberLogId}`
                    })
                }
            },
            watchOrder(){
                if(this.isActive){
                    uni.showToast({
                        title: `已经激活成功！`,
                        duration: 2500,
                        icon: 'none'
                    });
                    return;
                }
                this.modalType='active';
                this.showModal = true;
            },
            activeCardHandle(){
                uni.showLoading({
                    title: '',
                });
                service.mineService.putMcards({
                    data: {
                        vipCardMemberLogId: this.item.vipCardMemberLogId
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            setTimeout(()=>{
                                this.$emit('updateData');
                            }, 1000)
                            uni.showToast({
                                title: `激活成功`,
                                duration: 2500,
                                icon: 'none'
                            });
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    }
                });
            },
        },
        filters: {
            formatTime(value){
                return dateFmt( Number(value+'000'), 'yyyy-MM-dd')
            },
        }
    }
</script>

<style scoped lang="scss">
    .no-effective{
        padding: 20rpx;
        box-shadow:0rpx 3rpx 16rpx rgba(0,0,0,0.04);
        height: 298rpx;
        box-sizing: border-box;
        border-radius:10rpx;
        .icon-btn{
            font-size: 40rpx;
            margin-right: 20rpx;
            width: 64rpx;
            height: 64rpx;
            display: inline-block;
            text-align: center;
            line-height: 64rpx;
            background:linear-gradient(180deg,rgba(253,212,130,1) 0%,rgba(254,161,49,1) 100%);
            box-shadow:0px 3px 14px rgba(255,222,182,1);
            border-radius: 50%;
            color: #ffffff;
        }
        .btn-wrappers{
            padding: 38rpx 65rpx;
            .btn{
                width: 240rpx;
                height: 64rpx;
                line-height: 64rpx;
                text-align: center;
                box-shadow:0rpx 3rpx 14rpx rgba(255,222,182,1);
                border-radius:48rpx;
            }
            .one-btn{
                border:1rpx solid rgba(253,166,58,1);
                color: #FDA63A;
                background:#fff;
            }
            .two-btn{
                box-shadow:0rpx 3rpx 14rpx rgba(255,222,182,1);
                color: #fff;
                background:linear-gradient(180deg,rgba(253,212,130,1) 0%,rgba(254,161,49,1) 100%);
            }
        }
        .time{
            text-align: center;
        }
    }
</style>